<template>
  <div class="musicLists">
    <div class="musicLists-top">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>
    <div class="musicLists-mlist">
      <!-- Swiper -->
      <div class="swiper swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in state.musicList"
            :key="index"
            @click="goPage(item)"
          >
            <img :src="item.picUrl" :alt="item.name" />
            <div class="name">{{ item.name }}</div>
            <div class="count">
              <svg class="icon search" aria-hidden="true">
                <use xlink:href="#icon-24gl-play"></use>
              </svg>
              <span>{{ changeValue(item.playCount) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper
import { getMusicList } from "@/api/index";
import { reactive, onMounted, onUpdated } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    const router = useRouter();
    const store = new useStore();
    let state = reactive({ musicList: [] });
    function changeValue(num) {
      let res = 0;
      if (num >= 1000000000) {
        res = num / 1000000000;
        res = res.toFixed(2) + "亿";
      } else if (num > 10000) {
        res = num / 10000;
        res = res.toFixed(2) + "万";
      }
      return res;
    }
    function goPage(item) {
      router.push({
        path: "/listview",
        query: {
          id: item.id,
        },
      });
    }
    onMounted(async () => {
      let res = await getMusicList();
      state.musicList = res.data.result;
  
    });
    onUpdated(() => {
      var swiper = new Swiper(".swiper-container", {
        slidesPerView: 3,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    });
    return {
      state,
      changeValue,
      goPage,
    };
  },
};

// export default {
//     data() {
//         return {
//             musicList: []
//         }
//     },
//     methods: {
//         changeValue(num) {
//             let res = 0
//             if (num >= 1000000000) {
//                 res = num / 1000000000
//                 res = res.toFixed(2)+'亿'
//             }else if(num>10000){
//                 res = num/10000
//                 res = res.toFixed(2) + '万'
//             }
//             return res
//         }
//     },
//     async mounted() {
//         let res = await getMusicList()
//         this.musicList = res.data.result
//     },
//     updated() {
//         var swiper = new Swiper(".swiper-container", {
//             slidesPerView: 3,
//             spaceBetween: 10,
//             pagination: {
//                 el: ".swiper-pagination",
//                 clickable: true,
//             },
//         });
//     }
// }
</script>

<style lang="less" scoped>
.musicLists {
  width: 7.5rem;
  padding: 0 0.4rem;

  .musicLists-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;

    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }

    .more {
      border: 1px solid #ccc;
      border-radius: 0.1rem;
      font-size: 0.24rem;
      font-weight: 600;
      height: 0.4rem;
      padding: 0 0.06rem;
    }
  }

  // 下方轮播图
  &-mlist {
    position: relative;
    z-index: 0;
    .swiper-container {
      width: 100%;
      height: 3.5rem;
    }

    .swiper-slide {
      // background-color: orange;
      border-radius: 0.1rem;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      white-space: wrap;
      text-overflow: ellipsis;

      img {
        width: 100%;
        height: auto;
        border-radius: 0.1rem;
      }

      .name {
        height: 0.6rem;
        width: 100%;
        font-size: 0.24rem;
        line-height: 0.4rem;
      }

      .count {
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
        font-size: 0.24rem;
        color: #ccc;
        display: flex;
        align-items: center;
        .icon {
          color: #ccc;
          font-size: 0.2rem;
        }
      }
    }
  }
}
</style>
